<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/template_front_end.xhtml">
	<ui:insert name="header">
		<ui:include src="/pages/snippets/header_front_end.xhtml" />
	</ui:insert>
	<ui:define name="main">
		<p:lineChart value="#{chartBean.linearModel}" legendPosition="e"
			animate="true" zoom="true" title="Linear Chart" minY="0" maxY="10"
			style="width:500px;height:300px" widgetVar="chart" />

		<p:commandButton type="button" value="Export" icon="ui-icon-extlink"
			onclick="exportChart()" />
		<p:commandButton type="button" value="Reset" icon="ui-icon-cancel" onclick="chart.resetZoom()"/>

		<p:dialog widgetVar="dlg" showEffect="fade" modal="true"
			header="Chart as an Image">
			<p:outputPanel id="output" layout="block"
				style="width:500px;height:300px" />
		</p:dialog>
		
		<p:barChart id="basic" value="#{chartBean.categoryModel}" legendPosition="ne"  
                title="Basic Bar Chart" min="0" max="200" style="width:400px" animate="true"/>


		<script type="text/javascript">
		   function exportChart() {
			    //export image
			    $('#output').empty().append(chart.exportAsImage());
		
			    //show the dialog
			    dlg.show();
			}
			</script>

	</ui:define>
	<ui:insert name="left">
		<ui:include src="/pages/snippets/left_front_end.xhtml" />
	</ui:insert>
</ui:composition>